<template>
  <tabbar></tabbar>
  <div class="center">
  <div class="profile-page" v-for="item in tabbar" :key="item.name">
    <div class="profile-info">
      <img :src="item.name" alt="" class="profile-image">
      <p class="username">{{ username }}</p>
    </div>
  </div>
<div class="one">
  <p style="margin-top: 40px; margin-left: 20px;">余额：</p>
  <p style="font-size: 30px; color: orange; font-weight: bold;">￥999</p>
  <p style="border: 1px solid peru; padding: 10px; margin-top: 30px; 
  background-color: #000; color: peru; margin-left: 1300px; width: 100px; height: 20px; text-align: center;">
  充值
</p>
</div>

<div class="one1">
  <p style="margin-left: 10%; color: #ccc;">可提余额</p>
  <p style="margin-top: 60px; margin-left: -47px; font-weight: bold;">￥0</p>
  <p style="margin-left: 30%;  color: #ccc;">保证金账号</p>
  <p style="margin-top: 60px; margin-left: -55px; font-weight: bold;">￥0</p>
  <p style="margin-left: 40%;  color: #ccc;">福利金</p>
  <p style="margin-top: 60px; margin-left: -40px; font-weight: bold;">￥0</p>
</div>
<div class="two">
  <p style="margin-left: 10px; font-weight: bold;">我的交易：</p>
  <div v-for="item in title" :key="item.name">
    <div class="item">
      <img :src="item.image" alt="" style="width: 70px; height: 70px; border-radius: 50%; margin-top: 50px; margin-left: 162px;">
      <p style="margin-top: 20px; margin-left: 165px;">{{ item.name }}</p>
    </div>
  </div>
</div>
<div class="three">
    <p style="margin-left: 10px; font-weight: bold;">我的服务：</p>
    <div class="items-container">
      <div v-for="item in image" :key="item.name1" class="item1">
        <img :src="item.images" alt="" style="width: 70px; height: 70px; border-radius: 50%;">
        <p style="margin-top: 20px;">{{ item.name1 }}</p>
      </div>
    </div>
  </div>
  <button @click="logout" style="margin-top: 10px; background-color: #000; width: 100%; height: 50px;">退出登录</button>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Tabbar from '@/components/tabbar/index.vue'

const router = useRouter();
const username = ref('玩家123456'); // 假设用户名为 admin

const logout = () => {
  localStorage.removeItem('isLoggedIn'); // 清除登录状态
  router.push('/home/login'); // 退出登录后跳转到登录页面
};

const tabbar = ref([
  {
    name: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.IUtBcNuhKeNJrOkJUnUPBAAAAA?rs=1&pid=ImgDetMain'
  }
])
const title=ref([
  {
    image:'https://img.ixintu.com/download/jpg/20210115/f71137c559cd2d8de4aca06a48db9083_512_512.jpg!con',
    name: '我买到的'
  },
  {
    image:'https://tse3-mm.cn.bing.net/th/id/OIP-C.ZH_JihrOGhgGIqNmkwjCmQHaHa?rs=1&pid=ImgDetMain',
    name: '我卖出的'
  },
  {
    image:'https://bpic.588ku.com/art_origin_min_pic/19/03/14/d8c7c6b039a29f516f6b9719b6645aa4.jpg',
    name: '我的求购'
  },
  {
    image:'https://tse2-mm.cn.bing.net/th/id/OIP-C.9jLrrNXXLigZJyuksmyx3AAAAA?rs=1&pid=ImgDetMain',
    name: '我租到的'
  },
  {
    image:'https://pic.616pic.com/ys_bnew_img/00/31/26/B8UfXmVnlO.jpg',
    name: '我出租的'
  },
  {
    image:'https://img.tukuppt.com/png_preview/00/42/50/JpThgWOJvH.jpg!/fw/780',
    name: '我的还价'
  },
])
const image=ref([
  {
    images:'https://ts1.cn.mm.bing.net/th/id/R-C.a19a258d3a2dddfb8c728e565fc040de?rik=%2bVVLMHzZtEJJRQ&riu=http%3a%2f%2fpic.y8l.com%2fup%2f2019-5%2f2019522163755216.png&ehk=VmSYem0BixFlwI5h%2ft8KGGq1D%2bVX%2faLOEWIMYOvdqIY%3d&risl=&pid=ImgRaw&r=0',
    name1:'绑定steam'
  },
  {
    images:'https://bpic.588ku.com/element_origin_min_pic/19/06/15/c08c390ba39cea2c1939ccc9138de5fc.jpg',
    name1:'优惠卷'
  },
  {
    images:'https://ts1.cn.mm.bing.net/th/id/R-C.24d1d7357f27a3a23f6d3c7afcb9220d?rik=wIbm1hMzSE%2bLQw&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f38%2f09%2f09573c720fd60ce.jpg&ehk=R71Si0tcHe8VIBkCz1DxtfFE5F4yOwcOIAEmHS%2bzxGA%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    name1:'我的关注'
  },
  {
    images:'https://img.ixintu.com/download/jpg/201912/ab943c57e33e73d6779a1b2a3b15b926.jpg!con',
    name1:'兑换码'
  },
  {
    images:'https://img.tukuppt.com/png_preview/00/24/33/tPjl66Hm44.jpg!/fw/780',
    name1:'店铺设置'
  },
  {
    images:'https://img.ixintu.com/download/jpg/20201004/7c1e9312762cd4e4e34e19cd474b2e35_512_512.jpg!bg',
    name1:'关注公众号'
  },
  {
    images:'https://tse4-mm.cn.bing.net/th/id/OIP-C.xkq392K_vNO0y6luoQWENAAAAA?rs=1&pid=ImgDetMain',
    name1:'steam加速'
  },
  {
    images:'https://gd-hbimg.huaban.com/59454eaaba0b086985d63647259412580b7da80735e6-akaPdZ_fw658',
    name1:'咨询'
  },
  {
    images:'https://img95.699pic.com/element/40134/4462.png_300.png',
    name1:'cf背包'
  },
  {
    images:'https://pic.616pic.com/ys_bnew_img/00/36/77/nAhGa4svoc.jpg',
    name1:'帮助'
  },
  {
    images:'https://tse3-mm.cn.bing.net/th/id/OIP-C.06OJe71PIMblikc-JQQaCwHaHa?rs=1&pid=ImgDetMain',
    name1:'客服'
  },
])
</script>

<style scoped>
.center{
  width: 100%;
  height: auto;
  background-color: #0e0e0e;
  color: white;
}
.one{
  width: 100%;
  height: auto;
  border: 1px solid #232323;
  display: flex;
  background-color: #232323;
  margin-top: 50px;
}
.one1{
  width: 100%;
  height: auto;
  border: 1px solid #232323;
  display: flex;
  background-color: #232323;
}
.two{
  width: 100%;
  height: auto;
  border: 1px solid #232323;
  display: flex;
  background-color: #232323;
  margin-top: 50px;
}
.three{
  width: 100%;
  height: auto;
  border: 1px solid #232323;
  display: flex;
  background-color: #232323;
  margin-top: 50px;
}
.items-container {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  margin-left: 120px;
}

.item1 {
  flex: 0 0 10.66%; /* 每个 item 占据 1/6 的宽度 */
  text-align: center; /* 图片和文字居中对齐 */
  margin-top: 20px; /* 可以调整顶部间距 */
  margin-left: 10px;
  text-align: center;
  margin-left: 160px;
}

.profile-page {
  margin-left: 200px;
  margin-top: -16px;
}

.profile-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 50px;
  margin-right: 20px; /* 图片与用户名之间的间距 */
}
.username {
  font-size: large;
  margin-top: 100px;
}

</style>
